<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>救援人员路线</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link th:href="@{../assets/css/page.css}" rel="stylesheet" />
<link th:href="@{../assets/css/NGR.css}" rel="stylesheet" />
<!--[if lt IE 9]>l
	<script th:src="@{../assets/js/html5shiv.js}"></script>
	<script th:src="@{../assets/js/respond.min.js}"></script>
<![endif]-->
<!-- <style>
.inside-header {
	    background:url(../assets/img/home/home.png);
	    width:100%;
	    height: 100%;
	    background-repeat : no-repeat;
	    background-color: #DAE8F5;
	}


</style>
 -->
 <style>
 
    
     .unclicked {  
        width: 200px;  
        padding:8px;  
        background-color: #428bca;  
        border-color: #357ebd;  
        color: #fff;  
        -moz-border-radius: 1px;  
        -webkit-border-radius: 1px;  
        border-radius: 10px; /* future proofing */  
        -khtml-border-radius: 10px; /* for old Konqueror browsers */  
        text-align: center;  
        vertical-align: middle;  
        border: 1px solid transparent;  
        font-weight: 900;  
        font-size:125%  
      }  
  
</style>
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">

<div class="widget-body no-padding">



<div id="map" style="width: 100%; height: 100%; margin: 0; padding: 0; position:absolute;background-color: #DAE8F5"></div>
<div style="position:absolute;width: 115px;height: 60px; background: #DAE8F5; margin-left: 70%;margin-top: 20px;">
	<input class="unclicked" id="deleteline" type="button" style="height: 60px;width: 110px;"  value="删除所有路线"  />
</div>


</div></div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/NGR.min.js}"></script>
<script type="text/javascript">
var ifloor=0;
var color_value="red";
var b=false;
var color_value_history="red";
 var arr_history_all= new Array();
 var arr_layer= new Array();
(function () {
window.map = new NGR.View('map', {
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
window.res = new NGR.DataSource({
        //通过开发者平台获取AppKey
        AppKey: "f83a1f3ce8374d7fbda8931f71933fde" 
    });
 window.geomLayers = {};//图形
 window.geomLayers1 = {};//图形
window.layers = {};
 	var lat;
	var lng;
	var arrall = new Array(); 
  	var mapId = 2033;
  	var control = NGR.control.floor();
 	var markersLayer = NGR.layerGroup();
	var markersLayer1 = NGR.layerGroup();
	var addMarker = function () {
// 初始化marker
 /* var marker = NGR.marker(NGR.latLng(lat, lng)
      , {
    icon: NGR.icon({
      iconUrl: '../assets/fonts/images/marker_icon@2x.png',
      iconSize: [10, 10],
    }),
  }
);*/

 markersLayer.addLayer(marker);
};
  var onerror = function (e) {
    console.error(e, e.stack);
  };

document.getElementById("deleteline").onclick=function(){
		var c=	confirm("确定删除所有路线吗？");
		if(c==false){
			return;
		}else{
			deleteall();
		}
	
		 window.location.reload();

}


// 请求楼层数据
  var loadPlanarGraph = function (planarGraphId) {
    res.requestPlanarGraph(planarGraphId).then(function (layerInfo) {
      //console.log(layerInfo);
      NGR.IO.fetch({
        url: '../assets/fonts/style.template.json',
        onsuccess: JSON.parse
      }).then(function (style) {
		map.clear();
		markersLayer.clearLayers();
		//markersLayer1.clearLayers();
		layers.frame = NGR.featureLayer(layerInfo, {
            layerType: 'Frame',
            styleConfig: style
        });
         map.addLayer(layers.frame); // 将楼层框架图层添加到地图中去
        // 准备商铺图层
        layers.area = NGR.featureLayer(layerInfo, {
            layerType: 'Area',
            styleConfig: style
        });
      
        map.addLayer(layers.area); // 将商铺图层添加到地图中去
        
        // 准备商铺文字和图标图层
        layers.annotation = NGR.featureLayer(layerInfo.Area, {
            layerType: 'LogoLabel',
            styleConfig: style
        });
        // 准备公共设施图标图层
        layers.facility = NGR.featureLayer(layerInfo.Facility, {
            layerType: 'Facility',
            styleConfig: style
        });
        
        // 准备碰撞检测图层组
        layers.collision = NGR.layerGroup.collision({
            margin: 3
        });
       
        layers.collision.addLayer(layers.annotation); // 将商铺文字和图标图层添加到碰撞检测图层组中去
        layers.collision.addLayer(layers.facility); // 将公共设施图标图层添加到碰撞检测图层组中去
        map.addLayer(layers.collision); // 将碰撞检测图层组添加到地图中去
        //<![CDATA[
			for(var s=0;s<arr_layer.length;s++){
			map.addLayer(arr_layer[s]);
			console.log(arr_layer[s]._latlngs);
					var marker_start = NGR.marker(arr_layer[s]._latlngs[0], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/start.png',
				      iconSize: [25, 25]
				    })
				  });
				var marker_end = NGR.marker(arr_layer[s]._latlngs[arr_layer[s]._latlngs.length-1], {
				    icon: NGR.icon({
				      iconUrl: '../assets/img/end.png',
				      iconSize: [25, 25]
				    })
				  });
				
				marker_start.on("contextmenu",function(e){
				console.log(e.latlng)
					var popup = NGR.popup({
						closeButton:true,
						height:550
					})
					    .setLatLng(e.latlng)
					    .setContent('<div><input class="unclicked" type="button" style="width:150px;" value="删除该线路" onclick="deleteOne('+e.latlng.lat+','+e.latlng.lng+')"/></div>')
					    .openOn(map);
				
					})
				markersLayer.addLayer(marker_start);
				markersLayer.addLayer(marker_end);
			};
			//]]>
			map.addLayer(markersLayer);
        map.addLayer(markersLayer1);
        map.render();   // 所有图层都添加到地图后，渲染地图 
        console.log("加载完成")
      }).fail(onerror);
    }).fail(onerror);
  };
 map.on('click', function (e) {
if(b){
	var arr = new Array(); 
   var latlng=JSON.stringify(e.latlng);
 	latlng = eval("(" + latlng + ")");
	lat=latlng.lat;
	lng=latlng.lng;
   	arr.push(lat,lng);
	arrall.push(arr);
	//添加起点
	if(arrall.length==1){
		var marker = NGR.marker(e.latlng, {
		    icon: NGR.icon({
		      iconUrl: '../assets/img/start.png',
		      iconSize: [25, 25]
		    }),
			title:"消防设施",
			draggable: true
		  });
		markersLayer.addLayer(marker);
	
	}
	//console.log(arrall)
	geomLayers[type] = NGR.polyline(arrall, {
	    layerType: "Navi",type:"MultiLineString",color: color_value,arrow:true,  weight : 2,  fillColor : "#7db51b", radius: 0.5,
        dashArray: [5, 10],
        fillOpacity: 1,opacity:1,lineCap:"round",lineJoin:"round"
	});

	map.addLayer(geomLayers[type]);
	}
})
// 请求地图数据
  res.requestMap(mapId).then(function (mapInfo) {
    res.requestPOIChildren(mapInfo.poi).then(function(floors) {
      // 初始化楼层控件
      map.addControl(control);
      control.on('change', function (e) {
		if(arrall.length>0){
		var c=	confirm("当前楼层有未保存的路线，确认切换楼层吗？");
		}
		if(c==false){
			return;
		}else{
			arrall.splice(0,arrall.length);//清空保存点的数组
		}
		arr_layer.splice(0,arr_layer.length);//清空保存图层的数组
		arr_history_all.splice(0,arr_history_all.length);//清空保存图层的数组
		ifloor=e.to;
		lineAjax(e.to);
        control.setCurrentFloor(e.to, loadPlanarGraph);
      });
      control.setFloorList(floors);
		ifloor=floors[4].id;
		lineAjax(floors[4].id);
      	control.setCurrentFloor(floors[4].id, loadPlanarGraph);
    }).fail(onerror);
  }).fail(onerror);

}).call(this);

function openalert(){
    var area = [ $(window).width() > 800 ? '400px' : '95%',
        $(window).height() > 600 ? '200px' : '95%' ];
    layer.open({
    	title:"请选择路线颜色",
        shadeClose: false,
        shade: [0.5, "#F0F0F0"],
        maxmin: false,
        moveOut: true,
        offset: "100px",
        area: area,
        skin: "layui-layer-noborder",
        anim: 5,
        content: '<input name="color" type="radio" value="red" onclick="getValue(this)" />红色&nbsp;&nbsp;&nbsp;<input name="color" type="radio" value="black" onclick="getValue(this)" />黑色&nbsp;&nbsp;&nbsp;<input name="color" type="radio" value="green" onclick="getValue(this)" />绿色&nbsp;&nbsp;&nbsp;<input name="color" type="radio" value="blue" onclick="getValue(this)" />蓝色&nbsp;&nbsp;&nbsp;<input name="color" type="radio" value="purple" onclick="getValue(this)" />紫色&nbsp;&nbsp;&nbsp;<input name="color" type="radio" value="yellow" onclick="getValue(this)" />黄色&nbsp;&nbsp;&nbsp;',
        success: function (layero, i) {
        }
    })
}
function getValue(obj){    
     color_value = obj.value;  
   
} 

function lineAjax(ifloor){
 $.ajax({
                url:"../home/findline",
                type:"post",
                dataType:"json",
                async: false ,
                data:{
                "ifloor":ifloor,
                "iaddtype":1
                },
                success:function (data) {
               		 
               		//<![CDATA[
               		for(var i=0;i<data.data.length;i++){
               		color_value_history=data.data[i][1];
               		var arrall_history = new Array();
               		for(var j=0;j<data.data[i][0].length;j++){
               			//console.log(data.data[i][0][j].clat)
               			var arr_history= new Array();
               			arr_history.push(parseFloat(data.data[i][0][j].clat));
               			arr_history.push(parseFloat(data.data[i][0][j].clng));
               			arrall_history.push(arr_history)
               		}
               		arr_history_all.push(arrall_history)
               		//console.log(arr_history_all)
               		
               		}
               		for(var k=0;k<arr_history_all.length;k++){
               		  geomLayers[type] = NGR.polyline(arr_history_all[k], {
						    layerType: "Navi",type:"MultiLineString",color: data.data[k][1],arrow:true,  weight : 2,  fillColor : data.data[k][1], radius: 0.5,
					        dashArray: [5, 10],
					        fillOpacity: 1,opacity:1,lineCap:"round",lineJoin:"round"
						});
						//console.log(geomLayers[type])
						arr_layer.push(geomLayers[type]);
               		}
               		 console.log("读取路线")
               		//]]>
                },
                error:function (error) {
					
                }
            })//ajax
}

function deleteall(){
$.ajax({
	 			url:"../emergencyroad/deleteAllLine",
                type:"post",
                dataType:"json",
                async: false ,
                 data:{
                "iaddtype":1
                },
			 	success:function (data) {
			 		alert(data.retmsg);
			 	}
})
}


function deleteOne(lat,lng){
 var b=confirm("确认删除该路线吗？");
 if(b){
 	$.ajax({
	 			url:"../emergencyroad/deleteOne",
                type:"post",
                dataType:"json",
                async: false ,
                 data:{
                "clat":lat,
             	"clng":lng
                },
			 	success:function (data) {
			 		alert(data.retmsg);
			 		window.location.reload();
			 	}
})
 
 
 }
}
</script>
</body></html>

